<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="人数统计" name="first">
        <el-form
          ref="form"
          :model="queryParams"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="所在院系" prop="userName">
            <el-select
              v-model="queryParams.deptId"
              placeholder="请选择"
              clearable
              filterable
              class="elSelect"
              style="width: 100%"
            >
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在年级" prop="userName">
            <el-select
              v-model="queryParams.gradeId"
              placeholder="请选择"
              clearable
              filterable
              class="elSelect"
              style="width: 100%"
            >
              <el-option
                v-for="item in gradeList"
                :key="item.VALUE"
                :label="item.TITILE"
                :value="item.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生类型" prop="studentType">
            <el-select
              v-model="queryParams.studentType"
              placeholder="请选择"
              clearable
              filterable
              class="elSelect"
            >
              <el-option
                v-for="dict in dict.type.basic_speciality_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="onSearch"
                size="mini"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="onReset"
                >重置</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>统计学生总人数</span>
                  <el-button-group style="float: right">
                    <el-button
                      :class="{ 'is-active': viewMode === 'pieChart' }"
                      @click="viewMode = 'pieChart'"
                    >
                      <i class="el-icon-pie-chart"></i> 饼图
                    </el-button>
                    <el-button
                      :class="{ 'is-active': viewMode === 'pietable' }"
                      @click="handleViewTable"
                    >
                      <i class="el-icon-tickets"></i> 列表
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div v-if="viewMode === 'pieChart'">
                <div id="chart" style="width: 100%; height: 300px"></div>
              </div>

              <el-row v-if="viewMode === 'pietable'">
                <el-col :span="24">
                  <el-table :data="statusList" show-summary stripe>
                    <el-table-column
                      type="index"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      prop="name"
                      label="性别"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="MALENUM"
                      label="数值"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      label="占比"
                      align="center"
                      :show-overflow-tooltip="true"
                    >
                      <template #default="scope">
                        <span
                          >{{ calculatePercentage(scope.row.MALENUM) }}%</span
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>统计民族各学生人数</span>
                  <el-button-group style="float: right">
                    <el-button
                      :class="{ 'is-active': viewNatiom === 'nationChartMap' }"
                      @click="viewNatiom = 'nationChartMap'"
                    >
                      <i class="el-icon-pie-chart"></i> 饼图
                    </el-button>
                    <el-button
                      :class="{ 'is-active': viewNatiom === 'nationTable' }"
                      @click="handlenNatiomTable"
                    >
                      <i class="el-icon-tickets"></i> 列表
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div v-if="viewNatiom === 'nationChartMap'">
                <div id="nationChart" style="width: 100%; height: 300px"></div>
              </div>
              <el-row v-if="viewNatiom === 'nationTable'">
                <el-col :span="24">
                  <el-table :data="nationList.filter(
                        (data) =>
                          !searchNation ||
                          data.label
                            .toLowerCase()
                            .includes(searchNation.toLowerCase())
                      )
                    " show-summary stripe height="300">
                    <el-table-column
                      type="index"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      prop="label"
                      label="民族"
                      align="center" width="200"
                      :show-overflow-tooltip="true"
                    >
                  <template slot="header" slot-scope="scope">
                        <el-input
                          v-model="searchNation" clearable
                          size="mini"
                          placeholder="民族"
                        />
                      </template>
                  </el-table-column>
                    <el-table-column
                      prop="girlNum"
                      label="女生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="maleNum"
                      label="男生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="num"
                      label="总人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>统计政治面貌各学生人数</span>
                  <el-button-group style="float: right">
                    <el-button
                      :class="{
                        'is-active': viewPolitical === 'politicalChartMap',
                      }"
                      @click="viewPolitical = 'politicalChartMap'"
                    >
                      <i class="el-icon-pie-chart"></i> 饼图
                    </el-button>
                    <el-button
                      :class="{
                        'is-active': viewPolitical === 'politicalTable',
                      }"
                      @click="viewPolitical = 'politicalTable'"
                    >
                      <i class="el-icon-tickets"></i> 列表
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div v-if="viewPolitical === 'politicalChartMap'">
                <div
                  id="politicalChart"
                  style="width: 100%; height: 300px"
                ></div>
              </div>
              <el-row v-if="viewPolitical === 'politicalTable'">
                <el-col :span="24">
                  <el-table
                    :data="
                      politicalList.filter(
                        (data) =>
                          !search ||
                          data.label
                            .toLowerCase()
                            .includes(search.toLowerCase())
                      )
                    "
                    show-summary
                    stripe
                    height="300"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      prop="label"
                      label="政治面貌"
                      align="center" width="200"
                      :show-overflow-tooltip="true"
                    >
                    <template slot="header" slot-scope="scope">
                        <el-input
                          v-model="search" clearable
                          size="mini"
                          placeholder="政治面貌"
                        />
                      </template>
                  </el-table-column>
                    <el-table-column
                      prop="girlNum"
                      label="女生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="maleNum"
                      label="男生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="num"
                      label="总人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>统计获奖类型获奖学生人数</span>
                  <el-button-group style="float: right">
                    <el-button
                      :class="{
                        'is-active': viewAwader === 'awaderChartMap',
                      }"
                      @click="viewAwader = 'awaderChartMap'"
                    >
                      <i class="el-icon-pie-chart"></i> 折线图
                    </el-button>
                    <el-button
                      :class="{ 'is-active': viewAwader === 'awaderTable' }"
                      @click="viewAwader = 'awaderTable'"
                    >
                      <i class="el-icon-tickets"></i> 列表
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div v-if="viewAwader === 'awaderChartMap'">
                <div id="awadersChart" style="width: 100%; height: 300px"></div>
              </div>

              <el-row v-if="viewAwader === 'awaderTable'">
                <el-col :span="24">
                  <el-table :data="tableAwader" show-summary stripe>
                    <el-table-column
                      type="index"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      prop="type"
                      label="学生类型"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="女生人数"
                      label="女生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="男生人数"
                      label="男生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="总人数"
                      label="总人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <template #header>
                <div class="clearfix">
                  <span>统计学生总人数</span>
                  <el-button-group style="float: right">
                    <el-button
                      :class="{
                        'is-active': viewStudent === 'studentChart',
                      }"
                      @click="viewStudent = 'studentChart'"
                    >
                      <i class="el-icon-pie-chart"></i> 柱状图
                    </el-button>
                    <el-button
                      :class="{ 'is-active': viewStudent === 'studentTable' }"
                      @click="viewStudent = 'studentTable'"
                    >
                      <i class="el-icon-tickets"></i> 列表
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div v-if="viewStudent === 'studentChart'">
                <div id="studentChart" style="width: 100%; height: 300px"></div>
              </div>
              <el-row v-if="viewStudent === 'studentTable'">
                <el-col :span="24">
                  <el-table :data="tableData" show-summary stripe>
                    <el-table-column
                      type="index"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      prop="studentType"
                      label="学生类型"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="女生人数"
                      label="女生人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      prop="男生人数"
                      label="男生人数"
                    ></el-table-column>
                    <el-table-column
                      prop="总人数"
                      label="总人数"
                      align="center"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="籍贯地图统计" name="second" :lazy="true">
        <mapChart :deptOptions="deptOptions" :gradeList="gradeList"></mapChart>
      </el-tab-pane>
      <el-tab-pane label="家庭地址地图统计" name="map" :lazy="true">
        <chartMap :deptOptions="deptOptions" :gradeList="gradeList"></chartMap>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pieChart from "@/views/components/pieChart/index";
import * as echarts from "echarts";
import $ from "jquery";
import { getGradeSelect } from "@/api/information/gradeInfor";
import {
  nation,
  political,
  studentNumber,
  awaders,
  studentType,
} from "@/api/flowable/presentation.js";
import { collegeSelect } from "@/api/information/studentInfor";
import mapChart from "./componet/mapChart.vue";
import chartMap from "./componet/chartMap .vue";
export default {
  dicts: ["basic_speciality_type"],
  components: { pieChart, mapChart, chartMap },
  data() {
    return {
      activeName: "first",
      statusMapList: {},
      statusList: [], // 统计总人数列表数据
      queryParams: {},
      deptOptions: [],
      gradeList: [],
      nationList: [],
      politicalList: [],
      awadersList: [],
      studentTypeList: [],
      search: "",
      searchNation:'',
      viewMode: "pieChart",
      viewNatiom: "nationChartMap",
      viewPolitical: "politicalChartMap",
      viewAwader: "awaderChartMap",
      viewStudent: "studentChart",
    };
  },
  created() {
    this.getDeptTree();
    getGradeSelect().then((res) => {
      console.log(res);
      this.gradeList = res.data;
    });
    this.getList();
  },
  watch: {
    currentList() {
      this.updateChart();
    },
    viewMode(mode) {
      if (mode === "pieChart") {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    },
    viewNatiom(mode) {
      if (mode === "nationChartMap") {
        this.$nextTick(() => {
          this.initNationChartChart();
        });
      }
    },
    viewPolitical(mode) {
      if (mode === "politicalChartMap") {
        this.$nextTick(() => {
          this.initPoliticalChart();
        });
      }
    },
    viewStudent(mode) {
      if (mode === "studentChart") {
        this.$nextTick(() => {
          this.initStudentTypeChart();
        });
      }
    },
    viewAwader(mode) {
      if (mode === "awaderChartMap") {
        this.$nextTick(() => {
          this.initAwadersChart();
        });
      }
    },
  },
  computed: {
    tableData() {
      const { xData, yData } = this.studentTypeList;
      return xData.map((studentType, index) => {
        const rowData = { studentType: studentType };

        yData.forEach((item) => {
          rowData[item.title] = item.yData[index];
        });

        return rowData;
      });
    },
    tableAwader() {
      const { xData, yData } = this.awadersList;
      return xData.map((studentType, index) => {
        const rowData = { type: studentType };

        yData.forEach((item) => {
          rowData[item.title] = item.yData[index];
        });

        return rowData;
      });
    },
  },

  methods: {
    onSearch() {
      this.getList();
    },
    // 重置
    onReset(data) {
      console.log(data);
      this.queryParams = {};

      this.getList();
    },
    // 总人数列表切换
    handleViewTable() {
      this.statusList = [
        { name: "男生", MALENUM: this.statusMapList.MALENUM },
        { name: "女生", MALENUM: this.statusMapList.GIRLNUM },
      ];
      this.viewMode = "pietable";
    },
    // 总人数列表切换
    handlenNatiomTable() {
      this.viewNatiom = "nationTable";
    },
    calculatePercentage(value) {
      console.log(value);
      return Math.round((value / this.statusMapList.NUM) * 100);
    },
    getList() {
      //       统计男女生人数
      studentNumber(this.queryParams).then((res) => {
        this.statusMapList = res.data;
        this.$nextTick(() => {
          this.initChart();
        });
      });
      //       统计民族各学生人数及学生男女人数
      nation(this.queryParams).then((res) => {
        this.nationList = res.data;
        this.$nextTick(() => {
          this.initNationChartChart();
        });
      });
      //      政治面貌人数及学生男女人数
      political(this.queryParams).then((res) => {
        this.politicalList = res.data;
        this.$nextTick(() => {
          this.initPoliticalChart();
        });
      });
      //     统计获奖类型获奖学生人数及男女人数
      awaders(this.queryParams).then((res) => {
        this.awadersList = res.data;
        this.$nextTick(() => {
          this.initAwadersChart();
        });
      });
      //     统计获奖类型获奖学生人数及男女人数
      studentType(this.queryParams).then((res) => {
        this.studentTypeList = res.data;

        this.$nextTick(() => {
          this.initStudentTypeChart();
        });
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      collegeSelect().then((response) => {
        console.log(response);
        this.deptOptions = response.data;
        // this.queryParams.deptId = response.data[0].id;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //     柱状图
    initStudentTypeChart() {
      const myChart = echarts.init(document.getElementById("studentChart"));
      const option = {
        tooltip: {
          trigger: "item",
          //   formatter: (params) => {
          //     const total = this.statusMapList.NUM;
          //     return `${params.name}: ${params.value} (${params.percent}%)<br>总人数: ${total}`;
          //   },
        },
        legend: {
          data: this.studentTypeList.yData.map((item) => item.title),
        },
        xAxis: {
          type: "category",
          data: this.studentTypeList.xData,
        },
        yAxis: {
          type: "value",
        },
        series: this.studentTypeList.yData.map((item) => {
          return {
            name: item.title,
            type: "bar",
            data: item.yData,
          };
        }),
      };
      myChart.setOption(option);
    },
    //     柱状图
    initAwadersChart() {
      const myChart = echarts.init(document.getElementById("awadersChart"));
      const option = {
        tooltip: {
          trigger: "item",
          //   formatter: (params) => {
          //     const total = this.statusMapList.NUM;
          //     return `${params.name}: ${params.value} (${params.percent}%)<br>总人数: ${total}`;
          //   },
        },
        xAxis: {
          type: "category",
          data: this.awadersList.xData,
        },
        yAxis: {
          type: "value",
        },
        series: this.awadersList.yData.map((item) => {
          return {
            name: item.title,
            type: "bar",
            data: item.yData,
          };
        }),
      };
      myChart.setOption(option);
    },
    initChart() {
      const myChart = echarts.init(document.getElementById("chart"));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            const total = this.statusMapList.NUM;
            return `总人数: ${total}人<br>${params.name}: ${params.value}人，占比： (${params.percent}%)`;
          },
        },
        toolbox: {
          left: 100,
          // top:10,
        },
        legend: {
          orient: "vertical",
          left: "top",
          data: ["男生", "女生"],
        },
        series: [
          {
            name: "人数占比",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: this.statusMapList.MALENUM,
                name: "男生",
              },
              {
                value: this.statusMapList.GIRLNUM,
                name: "女生",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initPoliticalChart() {
      const myChart = echarts.init(document.getElementById("politicalChart"));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.data.name}
            <br/>总人数: ${params.data.value}人<br>男生：${params.data.maleNum}人<br/>女生: ${params.data.girlNum}人`;
          },
          //   formatter: (params) => {
          //     const total = this.statusMapList.NUM;
          //     return `${params.name}: ${params.value} (${params.percent}%)<br>总人数: ${total}`;
          //   },
        },
        legend: {
          orient: "vertical",
          left: "top",
          data: this.politicalList.map((item) => item.label),
        },
        series: [
          {
            name: "人数占比",
            type: "pie",
            radius: "50%",
            data: this.politicalList.map((item) => {
              return {
                name: item.label,
                value: item.num,
                ...item,
              };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    initNationChartChart() {
      this.chart = echarts.init(document.getElementById("nationChart"));
      this.updateChartOptions();
    },
    updateChartOptions() {
      const option = {
        tooltip: {
          trigger: "item",

          formatter: (params) => {
            return `${params.data.name}
            <br/>总人数: ${params.data.value}人<br>男生：${params.data.maleNum}人<br/>女生: ${params.data.girlNum}人`;
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: this.nationList.map((item) => item.label),
        },
        series: [
          {
            name: "各民族人数",
            type: "pie",
            radius: "50%",
            center: ["30%", "50%"],
            data: this.nationList.map((item) => {
              return {
                ...item,
                name: item.label,
                value: item.num,
              };
            }),
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>